<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <!-- 问题 -->
    <div class="w-full p-4">
      <div class="mb-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold">{{ $t("page.programe.programe") }}</h1>
        <van-icon
          class="cursor-pointer close-icon"
          @click="backPage"
          name="cross"
        />
      </div>
      <div class="responsive-layout">
        <div class="sidebar font-semibold mb-6 md:mb-0 rounded text-sm">
          <button
            @click="clickTab('tab1')"
            :class="{
              'active-tab': activeTab === 'tab1',
              '': activeTab !== 'tab1'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white rounded-none"
          >
            {{ $t("page.programe.Overview") }}
          </button>
          <button
            @click="clickTab('tab4')"
            :class="{
              'active-tab': activeTab === 'tab4',
              '': activeTab !== 'tab4'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            {{ $t("page.programe.ReferredUsers") }}
          </button>
        </div>
        <div class="content bg-[#0f212e] p-4 rounded-md">
          <!-- 概述 -->
          <div v-if="activeTab === 'tab1'">
            <p class="mb-4 text-[#b1bad3]">
              {{ $t("page.programe.Overview1") }}
            </p>
            <p class="mb-4 text-[#b1bad3]">
              {{ $t("page.programe.Overview2") }}
            </p>
            <p class="mb-4 text-[#b1bad3] text-xs">
              {{ $t("page.programe.Overview3") }}
            </p>
            <p class="mb-4 text-[#b1bad3] text-sm">
              {{ $t("page.programe.link") }}
            </p>
            <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
              <div
                class="flex items-center bg-gray-700 p-2 rounded-lg flex-grow mb-4 md:mb-0"
              >
                <div
                  class="text-[#b1bad3] font-semibold py-1 overflow-wrap break-words"
                >
                  {{ attendUrl }}
                </div>
              </div>
              <button
                v-copy="attendUrl"
                class="bg-gray-700 text-white py-3 px-4 rounded-lg text-sm font-semibold"
                @click="copyLink(attendUrl)"
              >
                <!-- {{ $t("page.programe.DownloadBanners") }} -->
                {{ $t("layer.wallet.copy") }}
              </button>
              <a-input
                ref="linkInput"
                type="text"
                v-model:value="attendUrl"
                style="display: none"
              />
            </div>
          </div>
          <!-- 保留计划 -->
          <div v-if="activeTab === 'tab2'">
            <p class="mb-4 text-[#b1bad3]">
              在 Stake.com
              这里，玩家的满意度一直以来——也将一直都会——是第一要务。这是我们为以玩家和联盟会员身份与平台互动的用户们制定长期战略的核心。我们力求通过独特的计划和活动来奖励我们的玩家，达到玩家的满意。
            </p>
            <p class="mb-4 text-[#b1bad3]">
              这些计划提供额外的资金和奖励，不仅为玩家们带来了更好的博彩体验，也有助于增加联盟佣金的总收入。
            </p>
            <p class="mb-4">计划包括：</p>
            <ul class="list-disc list-inside mb-4">
              <li>返水</li>
              <li>周度奖金</li>
              <li>月度奖金</li>
              <li>每小时 / 每日充值奖金</li>
              <li>VIP 级别奖金</li>
            </ul>
            <p class="mb-4 text-[#b1bad3]">
              用这独特的方法，您的佣金是以实现这些成本后的主家优势为依据。按照玩家获得福利的程度，您收到的主家优劣佣金将是任何游戏所宣传的约少于
              45% 的庄家优势。
            </p>
            <p class="mb-4 text-[#b1bad3]">
              若您想要详细了解费用计算的细目，请通过过支持人员与联盟经理联系。
            </p>
            <div class="p-4 rounded-lg border-2 border-dashed border-[#b1bad3]">
              <p class="mb-0">
                <i class="fas fa-info-circle"></i>
                保留计划可以让您的推广用户在体育博彩或娱乐场里使用。不过，在计算体育投注的联盟佣金之前，保留计划的费用已被吸收，预计我们已完成标准的
                30% 假定利润率。
              </p>
            </div>
          </div>
          <!-- 佣金 -->
          <div v-if="activeTab === 'tab3'">
            <div class="grid grid-cols-2 gap-4">
              <div class="bg-gray-800 p-6 rounded-lg">
                <h2 class="text-lg font-bold mb-4">
                  {{ $t("page.programe.Casino") }}
                </h2>
                <p class="mb-4 text-[#b1bad3]">
                  我们所有的游戏都带有不同的庄家优势百分比。您可以使用以下公式来计算您的佣金:
                </p>
                <div
                  class="bg-[#213743] p-4 rounded-lg mb-4 text-[#b1bad3] text-sm"
                >
                  <code>(Edge as decimal * wagered / 2) * commission rate</code>
                </div>
              </div>
              <div class="bg-gray-800 p-6 rounded-lg">
                <h2 class="text-lg font-bold mb-4">
                  {{ $t("page.programe.Sportsbook") }}
                </h2>
                <p class="mb-4 text-[#b1bad3]">
                  所有体育投注均以 3%
                  的理论庄家优势进行。您可以使用以下公式来计算您的佣金:
                </p>
                <div
                  class="bg-[#213743] p-4 rounded-lg mb-4 text-[#b1bad3] text-sm"
                >
                  <code>(0.03 * wagered / 2) * commission rate</code>
                </div>
              </div>
            </div>
            <div
              class="border-2 border-dashed border-[#b1bad3] p-4 mt-4 flex items-start rounded-lg text-sm text-[#b1bad3]"
            >
              <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i>
              <p>
                您若是个影响力极佳并能触及广大群众，或是处在其他特殊情况下的联盟会员，可联系我们杰出的支持团队。经与联盟经理人讨论后，我们可争取为您定制一套联盟计划。这可能包括更高的佣金。
              </p>
            </div>
          </div>
          <!-- 推荐用户 -->
          <div v-if="activeTab === 'tab4'">
            <div class="flex items-center mb-4">
              <div
                class="text-white font-semibold text-center mr-6 min-w-[100px]"
              >
                <p>{{ $t("page.table.Totalinvitations") }}</p>
                <p>{{ invUser.intvit_all }}</p>
              </div>
              <div
                class="text-white font-semibold mr-6 text-center min-w-[160px]"
              >
                <p>{{ $t("page.table.Newinvitationsthismonth") }}</p>
                <p>{{ invUser.intvit_month }}</p>
              </div>
              <div
                class="text-white font-semibold mr-6 text-center min-w-[160px]"
              >
                <p>{{ $t("page.table.Member'sbetsthismonth") }}</p>
                <p>{{ invUser.bet_month }}</p>
              </div>
              <div
                class="text-white font-semibold mr-6 text-center min-w-[160px]"
              >
                <p>{{ $t("page.table.MemberProfitfortheMonth") }}</p>
                <p>{{ invUser.profit_month }}</p>
              </div>
              <div class="text-white font-semibold text-center min-w-[160px]">
                <p>{{ $t("page.table.totalRebateAmount") }}</p>
                <p>{{ invUser.return_water_all }}</p>
              </div>
            </div>
            <table class="w-full bg-[#213743]" style="table-layout: fixed">
              <thead class="table-header text-[#90bacc]">
                <tr>
                  <th class="p-4 text-center">
                    {{ $t("page.table.nickname") }}
                  </th>
                  <th class="p-4 text-center">
                    {{ $t("page.table.Registered") }}
                  </th>
                  <th class="p-4 text-center">
                    {{ $t("page.table.balances") }}
                  </th>
                  <th class="p-4 text-center">
                    {{ $t("page.table.bettingamount") }}
                  </th>
                  <th class="p-4 text-center">
                    {{ $t("page.table.MembershipProfit") }}
                  </th>
                  <!-- <th class="p-4 text-center">
                    {{ $t("page.table.Lastlogin") }}
                  </th> -->
                  <th class="p-4 text-center" v-show="is_agent == 0">
                    {{ $t("page.table.refundAmount") }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  class="table-row bg-[#213743]"
                  v-for="(item, i) in tableData3"
                  :key="i"
                >
                  <td class="p-4 text-center">{{ item.user_name }}</td>
                  <td class="p-4 text-center whitespace-nowrap">
                    {{ item.created_at }}
                  </td>
                  <td class="p-4 text-center">{{ item.balance }}</td>
                  <td class="p-4 text-center">{{ item.bet }}</td>
                  <td class="p-4 text-center">{{ item.profit }}</td>
                  <!-- <td class="p-4 text-center">{{ item.last_login_time }}</td> -->
                  <td class="p-4 text-center" v-show="is_agent == 0">
                    {{ item.return_water_amount }}
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="max-w-[200px] w-full m-auto mt-2">
              <van-pagination
                :prev-text="$t('page.table.prev')"
                :next-text="$t('page.table.next')"
                v-model="currentPage3"
                :page-count="totalList3"
                mode="simple"
                @change="goPage"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
import { useRouter } from "vue-router";
import { agentCode, getAgentUserData } from "../../api/user.js";
import useClipboard from "vue-clipboard3";
import { dateTimeZone } from "../../utils/date";
import { mainAct } from "../../store/activeda";
const main = mainAct();
const { toClipboard } = useClipboard();
const router = useRouter();
const activeTab = ref("tab1");
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
//分页
const currentPage3 = ref(1);
const totalList3 = ref();
const tableData3 = ref([]);
const invUser = ref({});
const backPage = () => {
  router.go(-1);
};

const linkInput = ref(null);

const copyLink = async value => {
  try {
    // 复制
    await toClipboard(value);
    ElMessage({
      message: globalProperties.$t("page.budget.copy"),
      type: "success"
    });
    // 复制成功
  } catch (e) {
    // 复制失败
  }
};
const is_agent = ref(0);
const getDataTable = () => {
  getAgentUserData({
    page: currentPage3.value,
    page_size: 10
  }).then(res => {
    if (res.errno == 0) {
      is_agent.value = res.data.is_agent;
      invUser.value = res.data;
      res.data.list.forEach(item => {
        item.created_at = dateTimeZone(
          item.created_at,
          "{y}-{m}-{d} {h}:{i}:{s}",
          main.timeZone
        );
        item.last_login_time = dateTimeZone(
          item.last_login_time,
          "{y}-{m}-{d} {h}:{i}:{s}",
          main.timeZone
        );
      });
      tableData3.value = res.data.list;
      totalList3.value = Math.ceil(res.data.total / res.data.page_size);
    }
  });
};

const goPage = () => {
  console.log(currentPage3.value);
  getDataTable();
};

const attendUrl = ref("");
const getCode = () => {
  agentCode().then(res => {
    if (res.errno == 0) {
      attendUrl.value = window.location.origin + "?inviteCode=" + res.data.code;
      // window.location.origin + '/register?invite_code=' + this.states.invite_code
    }
  });
};
onMounted(() => {
  //需要登录
  if (main.isLogin) {
    getCode();
    getDataTable();
  }
});
watch(
  () => main.isLogin,
  () => {
    if (main.isLogin) {
      //执行onmounted请求
      getCode();
      getDataTable();
    }
  }
);

const clickTab = val => {
  activeTab.value = val;
  main.scrollable.scrollTop = 0;
  if (val == "tab4" && main.isLogin) {
    getDataTable();
  }
};
</script>
<style scoped lang="less">
@media (min-width: 600px) {
  .responsive-layout {
    display: flex;
    position: relative;
  }

  .responsive-layout .sidebar {
    width: 220px;
    height: 300px;

    display: block;
    margin-right: 20px;
    background-color: unset;
    border-radius: 0;
    position: sticky;
    top: 2rem;
    padding: 0;

    .btn {
      width: 220px;

      background-color: #0f212e;
      border-radius: 0;
      text-align: left;
    }
  }

  .responsive-layout .content {
    // flex-grow: 1;
  }

  .active-tab {
    background-color: #071824 !important;
    border-left: 3px solid #1475e1 !important;
  }
}

.content {
  overflow: auto;

  table {
    min-width: 900px;
  }
}

.sidebar {
  background-color: #071824;
  display: flex;
  border-radius: 40px;
  padding: 0.5rem;

  .btn {
    width: 200px;
    height: 40px;
    border-radius: 40px;
    text-align: center;
    border-left: 3px solid #071824;
  }
}

.active-tab {
  background-color: #2f4553;
}

.ipt-dark {
  background-color: #0f212e;
  border: 2px solid #2f4553;
}

.ipt-dark:hover {
  border-color: #557086;
}

.close-icon:hover {
  color: white;
}

.close-icon {
  font-size: 18px;
  color: #b1bad3;
}

:deep(.van-pagination__item) {
  border-radius: 5px;
  background-color: #0f212e;
  padding: 0;

  .btn {
    border: unset;
    outline: unset;
  }
}

:deep(.van-hairline--surround:after) {
  border: unset;
  outline: unset;
}
</style>
